<template>
	<view class="icon_section">
<!--     加跳转链接-->
		<view v-if="iconArr.length" v-for="(item, i) in iconArr" :key="i" class="icon_list" @click="() => jumpToPage(item)">
			<view class="icon_inner">
				<view class="icon_self" :style="{...item.iconStyle}">
					<tm-image :width="92" :height="92" :src="`${urlApi}${item.menu_url}`"></tm-image>
				</view>
				<view class="icon_text">{{item.menu_name}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, watch } from 'vue'
	import {ASSETS_HOST} from '@/config'
	
	const urlApi = ref<string>(ASSETS_HOST)
	const props = defineProps({
	  iconList: Array,
	  styleObj: Object
	})
	const iconArr = ref<any>(props.iconList)
	watch(
	    () => props.iconList,
	    (newV) => {
		  iconArr.value = newV
	    }
	);
	const jumpToPage = (item: any) => {
		console.log('====item',item)
		if(item.jump_url == '/subpkg/home_new/service') {
			uni.switchTab({
				url: '/pages/service/service'
			})
		}else {
			uni.navigateTo({
				url: item.jump_url
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.icon_section{
		display: flex;
		flex-wrap: wrap;
		.icon_list{
			width: 25%;
			.icon_inner{
				padding: 8px 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
		// .icon_self{
		// 	width: 23px;
		// 	height: 23px;
		// 	background: #f5f5f5;
		// 	border-radius: 6px;
		// }
		.icon_text{
			margin-top: 16rpx;
			font-size: 24rpx;
			text-align: center;
			color: $cus-color-1;
		}
	}
</style>
